<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>layout 后台大框架布局 - Layui</title>
    <!--<link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}"/>-->
    <th:block th:include="layout/header :: header"></th:block>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header header">
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <div class="layui-main">
            <div class="admin-login-box">
                <a class="logo" style="left: 0;" href="#">
                    <span style="font-size: 22px;color: #fff9ec">SpringBootCMS</span>
                </a>
                <div class="admin-side-toggle">
                    <i class="fa fa-bars" aria-hidden="true"></i>
                </div>
            </div>
            <ul class="layui-nav admin-header-item">
                <li class="layui-nav-item">
                    <a href="javascript:;">导航菜单</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">导航菜单</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="admin-header-user">
                        <!--<img src="/static/images/logo.jpg" />-->
                        <span>管理员</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;"><i class="fa fa-user-circle" aria-hidden="true"></i> 个人信息</a>
                        </dd>
                        <dd>
                            <a href="javascript:;"><i class="fa fa-gear" aria-hidden="true"></i> 设置</a>
                        </dd>
                        <dd>
                            <a href="/admin/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</a>
                        </dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav admin-header-item-mobile">
                <li class="layui-nav-item">
                    <a href="/admin/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-side layui-bg-black" id="admin-side">
        <div class="layui-side-scroll" id="admin-navbar-side" lay-filter="side">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;"><i class="layui-icon">&#xe614;</i>&nbsp;文章管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="" target="contentIframe">文章分类</a></dd>
                        <dd><a href="" target="contentIframe">文章列表</a></dd>
                    </dl>
                </li>



                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon">&#xe614;</i>&nbsp;权限管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="" target="contentIframe">角色列表</a></dd>

                    </dl>
                </li>




                <li class="layui-nav-item"><a href="http://www.baidu.com" target="contentIframe">产品</a></li>
                <li class="layui-nav-item"><a href="http://www.baidu.com" target="contentIframe">大数据</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon">&#xe614;</i>&nbsp;系统设置</a>
                    <dl class="layui-nav-child">
                        <dd><a href="" target="contentIframe">网站设置</a></dd>
                        <dd><a href="" target="contentIframe">公众号配置</a></dd>

                        <dd><a href="" target="contentIframe">系统监控</a></dd>
                        <dd><a href="" target="contentIframe">短信接入</a></dd>
                        <dd><a href="http://www.baidu.com" target="contentIframe">邮件配置</a></dd>
                        <dd><a href="http://www.baidu.com" target="contentIframe">短信配置</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body" id="admin-body" style="bottom: 0">
        <div class="layui-tab admin-nav-card layui-tab-brief" lay-filter="admin-tab">

            <!--<div class="layui-tab-content" style="min-height: 150px; padding: 5px 0 0 0;">-->
            <div class="layui-tab-content" style="padding-right: 0px">
                <div class="layui-tab-item layui-show">
                    <iframe th:src="@{/index}" name="contentIframe"></iframe>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-footer">
       <p style="line-height: 44px;text-align: center">技术支持</p>
    </div>
</div>
<th:block th:include="layout/footer :: footer"></th:block>
<script>
    //JavaScript代码区域
    //iframe自适应
    $ = layui.jquery;
    $(window).on('resize', function() {
        var $content = $('.admin-nav-card .layui-tab-content');
        $content.height($(this).height() - 106);
        $content.find('iframe').each(function() {
            $(this).height($content.height());
        });
    }).resize();


    $('.admin-side-toggle').on('click', function() {
        var sideWidth = $('#admin-side').width();
        if(sideWidth === 200) {
            $('#admin-body').animate({
                left: '0'
            }); //admin-footer
            $('#admin-footer').animate({
                left: '0'
            });
            $('#admin-side').animate({
                width: '0'
            });
        } else {
            $('#admin-body').animate({
                left: '200px'
            });
            $('#admin-footer').animate({
                left: '200px'
            });
            $('#admin-side').animate({
                width: '200px'
            });
        }
    });

</script>
</body>
</html>
